<template>
    <div class="aside_content">
        <el-menu
          :default-active="activePath"
          mode="horizontal"
          class="el-menu-vertical-demo"
          active-text-color=" #408EFF"
          router
          unique-opened>
          <el-menu-item
            :key="index"
            :index="'/' + item.path"
            v-for="(item,index) in menuList"
            @click="saveNavState('/' + item.path)">
            <template slot="title">
                <i :class="item.iconFont"></i>
                <span>{{item.authName}}</span>
            </template>
          </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
export default {
  name: 'NavMenu',
  data() {
    return {
      menuList: [],
      activePath: '',
      isCollapse: true,
    }
  },
  created() {
    this.renderMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
      ? window.sessionStorage.getItem('activePath')
      : '/home'
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
    },
    renderMenuList() {
      /* 加载menu列表 */
      this.menuList = this.$store.state.NavMenu.menuList
    },
  },
}
</script>
<style lang="scss" scoped>
  // .el-menu {
  //   background-color: #1367C8;
  //   color: #FFFFFF !important;
  //   &:hover {
  //     background-color: #1367C8 !important;
  //   }
  // }
  // ::v-deep .is-active {
  //   background-color: transparent !important;
  //   color: #FFFFFF !important;
  //   border-bottom-color: #ffffff !important;
  // }

</style>